<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04员工表格练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="name">
<input type="text" placeholder="请输入员工工资" id="money">
<input type="text" placeholder="请输入员工岗位" id="job">
<button onclick="add()">点我添加员工</button>
<hr>
<table border="1">
    <caption>员工表</caption>
    <tr>
        <th >姓名</th>
        <th >工资</th>
        <th >岗位</th>
    </tr>
</table>
<hr>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品列表</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    function add(){
        let uName = document.getElementById('name').value;
        let uMoney = document.getElementById('money').value;
        let uJob = document.getElementById('job').value;
        if(uName==''||uMoney==''||uJob==''){
            alert('请输入完整信息!');
            return;
        }
        let tr = document.createElement('tr');
        let nameTd = document.createElement('td');
        let moneyTd = document.createElement('td');
        let jobTd = document.createElement('td');
        nameTd.innerHTML = uName;
        moneyTd.innerHTML =uMoney;
        jobTd.innerHTML = uJob;
        tr.append(nameTd,moneyTd,jobTd);
        document.querySelector('table').append(tr);
        document.getElementById('name').value='';
        document.getElementById('money').value='';
        document.getElementById('job').value='';

    }

    let productArr = [
        {title:'小米14',price:8000,num:200},
        {title:'华为mate60',price:5000,num:100},
        {title:'苹果15',price:10000,num:800},
        {title:'OPPO Reno12',price:999,num:10},
    ]

    let tableE = document.querySelector('table');
    for(let i = 0;i<productArr.length;i++){
        let tr = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].num;
        tr.append(titleTd,priceTd,numTd);
        tableE.append(tr);
    }
</script>
</body>
</html>